/<template>
  <div class="content-outer">
    <div class="content-head">
      <div class="search-form">
        <div class="search-item">
          <div class="item-label">小程序名称</div>
          <div class="item-content">
            <el-select
              v-model="formData.mini_app_id"
              filterable
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in optionsList.miniApp"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                style="display: flex; align-items: center;justify-content: space-between;"
              >
                <span style="float: left">{{ item.name }}</span>
                <svg-icon
                  v-if="item.app_type==1"
                  style="float: right;"
                  icon-class="miniapp"
                  class="imageIcon"
                />
                <svg-icon
                  v-else
                  style="float: right;"
                  icon-class="douyin"
                  class="imageIcon"
                />
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="search-item">
          <el-button
            :loading="loading"
            style="margin-left: 10px"
            type="primary"
            @click="onSubmit"
          >查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </div>
      </div>
    </div>

    <div class="content-table">
      <BiTable
        :loading="loading"
        :data="tableData"
        size="medium"
        :column="tableColums"
        fixed="sticky"
        fixed-offset="50"
        pagination
        layout="total, prev, pager, next"
        :auto-scroll="false"
        :total="page_info.total"
        :page.sync="page_info.page"
        :limit.sync="page_info.page_size"
        @pagination="handlePageChange"
      >
        <template v-slot:status="{row}">
          <div>
            <el-switch
              v-model="row.status"
              active-color="#13ce66"
              inactive-color="#DDDFE6"
              active-value="1"
              inactive-value="0"
              @change="onChangeTemplateStatus(row)"
            > </el-switch>
          </div>
        </template>
      </BiTable>

    </div>
  </div>
</template>

<script>
import { getSceneList, changeSceneStatus } from '@/api/subscribe'
import { commonData, miniAppList } from '@/api/common'

export default {
  data() {
    return {
      loading: false,
      formData: {
        mini_app_id: ''
      },
      optionsList: {
        miniApp: []
      },
      tableData: [],
      page_info: {
        total: 0,
        page: 1,
        page_size: 20
      },
      tableColums: [
        {
          label: '小程序',
          prop: 'mini_app_name',
          render: (h, { row }) => {
            if (row.app_type == 1) {
              return (
                <p>
                  {row.mini_app_name}
                  <svg-icon icon-class='miniapp' class='imageIcon' />
                </p>
              )
            } else if (row.app_type == 2) {
              return (
                <p>
                  {row.mini_app_name} <svg-icon icon-class='douyin' class='imageIcon' />
                </p>
              )
            } else {
              return <p>{row.mini_app_name}</p>
            }
          }
        },
        {
          label: '场景行为',
          prop: 'scene_name'
        },
        {
          label: '是否启用',
          prop: 'status',
          slotScope: true
        }
      ]
    }
  },
  mounted() {
    this.getMinApp()
  },
  methods: {
    async getMinApp() {
      const res = await miniAppList()
      if (res.status_code === 1) {
        this.optionsList.miniApp = res.data
        this.formData.mini_app_id = res.data[0].value
        this.onSubmit()
      }
    },
    async onSubmit() {
      this.loading = true
      const params = {
        mini_app_id: this.formData.mini_app_id,
        page: this.page_info.page,
        page_size: this.page_info.page_size
      }
      const res = await getSceneList(params)
      if (res.status_code === 1) {
        this.tableData = res.data.data
        this.page_info = res.data.page_info
      }
      this.loading = false
    },
    handleReset() {
      this.formData = {
        mini_app_id: ''
      }
    },
    async onChangeTemplateStatus(row) {
      console.log(row.status)
      const param = {
        id: row.id,
        status: row.status
      }
      const res = await changeSceneStatus(param)
      if (res.status_code === 1) {
        this.onSubmit()
      }
    },
    handlePageChange(value) {
      this.page_info.page = value.page
      this.onSubmit()
    }
  }
}
</script>

<style lang="scss" scoped>
.content-outer {
  padding-top: 10px;
  width: 100%;
  .content-head {
    .search-item {
      // padding-bottom: 0px;
    }
  }
  .content-table {
    background-color: white;
  }
}
.content-outer .content-head {
  width: 100%;
  background-color: white;
  color: #333333;
  font-size: 14px;
  margin-bottom: 10px;
  padding: 20px 20px 0 20px;
}
.search-form .search-item {
  min-width: 330px !important;
  padding-right: 20px;
  padding-bottom: 20px;
  margin-bottom: 0;
  margin-right: 0;
  margin-left: 0;
  margin-top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}
</style>